<template>
    <div>
        <span style="color: #8c939d">开启下列功能限制开关后，黑名单列表的所有客户将无法参加相应活动</span>
        <div class="interspaceH"></div>
<!--        <div style="display:flex;">
            <card_switch title="任务裂变" imageUrl="http://cos.tpchain.net:9300/static/desktop/images/zzx_logo.png" :switchValue="true" :cardStyle="{width:'180px','border-radius':'5px','margin-right': '20px'}"></card_switch>
            <card_switch title="幸运大转盘" imageUrl="http://cos.tpchain.net:9300/static/desktop/images/zzx_logo.png" :cardStyle="{width:'180px','border-radius':'5px','margin-right': '20px'}"></card_switch>
        </div>-->
        <div style="display:flex;">
            <card_switch v-for="(item, index) in activityList" :key="index" :title="item.activityName" imageUrl="@/assets/img/scrm-logo.png" :switchValue="item.blackClient" @activitySwitchHandle="activitySwitchHandle" :cardStyle="{width:'180px','border-radius':'5px','margin-right': '20px'}" :otherData="item"></card_switch>
        </div>
    </div>
</template>

<script>
import Card_switch from "@/components/card_switch/card_switch";
export default {
    name: "list_rule",
    components: {Card_switch},
    data() {
        return {
            activityList: []
        }
    },
    mounted() {
        this.queryDataHandle()
    },
    methods: {
        queryDataHandle() {
            this.$request("/api/wheel/getlucyDraw/1_0", {}, "POST").then((data) => {
                data.rows.map((item) => {
                    item['blackClient'] = JSON.parse(item['blackClient'])
                })
                this.activityList = data.rows
            })
        },
        activitySwitchHandle(e, data) {
            data['blackClient'] = JSON.stringify(e)
            let payload = {
                activityInstanceId: data.activityInstanceId,
                blackClient: JSON.stringify(e)
            }
            this.$request("/api/wheel/saveInstance/1_0", payload, "POST").then((data) => {
                this.$message.success("设置成功")
                this.queryDataHandle()
            })
        }
    }
}
</script>

<style scoped>

</style>
